31. What is IndexedDB?

What is IndexedDB?

IndexedDB is a client-side, NoSQL database that allows web applications to store large amounts of structured data inside a user's browser. It is useful for applications that need offline functionality, fast data retrieval, or persistent storage beyond a single session.

It provides:

• Indexed Storage: Efficient querying using indexes.
• Asynchronous API: Doesn't block the main thread.
• Transactions: Ensures data integrity.
• Large Data Storage: Unlike localStorage, which has a size limit, IndexedDB can store large blobs and files.

Basic IndexedDB Example

Step 1: Open a Database

javascript
CopyEdit
let db;
const request = indexedDB.open("MyDatabase", 1);

request.onsuccess = function(event) {
    db = event.target.result;
    console.log("Database opened successfully");
};

request.onerror = function(event) {
    console.log("Error opening database:", event.target.errorCode);
};

Step 2: Create an Object Store

When the database version changes, the onupgradeneeded event is triggered. We use it to create an object store.

javascript
CopyEdit
request.onupgradeneeded = function(event) {
    let db = event.target.result;
    
    if (!db.objectStoreNames.contains("users")) {
        let userStore = db.createObjectStore("users", { keyPath: "id", autoIncrement: true });
        userStore.createIndex("name", "name", { unique: false });
    }
};

• Object Store (users): Stores user data.
• KeyPath (id): Auto-increments for each entry.
• Index (name): Enables searching users by name.

Step 3: Add Data

javascript
CopyEdit
function addUser(name, age) {
    let transaction = db.transaction(["users"], "readwrite");
    let store = transaction.objectStore("users");

    let request = store.add({ name: name, age: age });

    request.onsuccess = function() {
        console.log("User added successfully");
    };

    request.onerror = function(event) {
        console.log("Error adding user:", event.target.error);
    };
}

• readwrite mode is used since we are modifying data.

Step 4: Retrieve Data

javascript
CopyEdit
function getUser(id) {
    let transaction = db.transaction(["users"], "readonly");
    let store = transaction.objectStore("users");

    let request = store.get(id);

    request.onsuccess = function(event) {
        console.log("User:", event.target.result);
    };

    request.onerror = function() {
        console.log("Error retrieving user");
    };
}

• This fetches a user by id.

Step 5: Delete Data

javascript
CopyEdit
function deleteUser(id) {
    let transaction = db.transaction(["users"], "readwrite");
    let store = transaction.objectStore("users");

    let request = store.delete(id);

    request.onsuccess = function() {
        console.log("User deleted successfully");
    };

    request.onerror = function() {
        console.log("Error deleting user");
    };
}

• Deletes a user based on id.

When to Use IndexedDB?

• Progressive Web Apps (PWAs) needing offline storage.
• Storing large datasets like images, files, or cached API responses.
• Fast lookups using indexes.

Comparison with Other Storage Methods

IndexedDB is best for structured data, whereas localStorage is good for small key-value pairs.

Let me know if you need further explanations! 🚀